<!--  -->
<template>
  <div class="body">
    <myheader title="书籍详情">
      <div slot="left">
        <van-icon
          name="arrow-left"
          @click="$router.back()"
          slot="left"
        ></van-icon>
      </div>
     <van-icon name="share" @click="share" slot="right"/>
     
    </myheader>
    <div class="header">
      <div class="left">
        <van-image :src="require('../assets/uhhj.jpg')" width="107" height="146" fit="contain" />
      </div>
      <div class="right">
        <p class="title">{{ book.title }}</p>
        <p class="author">{{ book.author }}</p>
        <div class="tags">
          <van-tag
            color="#7232dd"
            plain
            v-for="(item, index) in book.tags"
            :key="index"
            >{{ item }}</van-tag
          >
        </div>
        <div class="desc">
          {{ book.desc }}
        </div>
      </div>
    </div>
 <van-share-sheet
        v-model="showShare"
        title="分享给好友"
        :options="options"
        @select="onSelect"
      />
    <van-tabs
      class="tabs"
      sticky
      animated
      v-model="tabactive"
      background="#FDFFF7"
    >
      <van-tab title="目录">
        <div class="textMiddle" v-html=" book.category "></div>
      </van-tab>

      <van-tab title="详情">
        <div class="content">{{ book.content |lengthFilter}}</div>
      </van-tab>
    </van-tabs>

    <div class="readBottom">
      <span @click="collect">收藏</span>
      <span class="redRound">阅读</span>
      <span>下载</span>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等)
import myheader from "@/components/header.vue";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { myheader },
  data() {
    return {
      tabactive: 0,
      showShare: false,
      // 分享数组
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "二维码", icon: "qrcode" },
      ],
      book: {
        id: 1,
        title: "伤寒杂病论",
        author: "张仲景",
        desc: "《伤寒杂病论》 [1]是中国传统医学著作之一，是一部论述外感病与内科杂病为主要内容的医学典籍，作者是东汉末年张仲景，至今是中国中医院校开设的主要基础课程之一。《伤寒杂病论》系统地分析了伤寒的原因、症状、发展阶段和处理方法，创造性地确立了对伤寒病的“六经分类”的辨证施治原则，奠定了理、法、方、药的理论基础。",
        img: require('../assets/uhhj.jpg'),
        level: 1,
        userstatus: "未读",
        userpercent: 0,
        tags: ["天池穴", "针灸", "针灸", "针灸"],
        category: `卷一
平脉法<br>

卷二
平脉法<br>

卷三
六气主客
伤寒例
杂病例<br>

卷四
温病脉证并治<br>

卷五
伤暑脉证并治
热病脉证并治
湿病脉证并治
伤燥病脉证并治
伤风病脉证并治
寒病脉证并治<br>

卷六 辨太阳病脉证并治上<br>
卷七 辨太阳病脉证并治中<br>
卷八 辨太阳病脉证并治下<br>
卷九 辨阳明病脉证并治<br>
卷十 辨少阳病脉证并治
辨太阴病脉证并治<br>
卷十一 辨少阴病脉证并治
辨厥阴病脉证并治<br>
卷十二 辨霍乱吐利病脉证并治
辨痉阴阳易差后病脉证并治<br>

卷十三 辨百合狐惑阴阳毒病脉证并治
辨疟病脉证并治
辨血痹虚劳病脉证并治<br>
卷十四 辨咳嗽水饮黄汗历节（关节）病脉证并治<br>

卷十五
辨瘀血吐鼻出血下血疮痈病脉证并治
辨胸痹病脉证并治<br>

卷十六
辨妇人各病脉证并治`,
        content:
          "《伤寒杂病论》 [1]  是中国传统医学著作之一，是一部论述外感病与内科杂病为主要内容的医学典籍，作者是东汉末年张仲景，至今是中国中医院校开设的主要基础课程之一。《伤寒杂病论》系统地分析了伤寒的原因、症状、发展阶段和处理方法，创造性地确立了对伤寒病的“六经分类”的辨证施治原则，奠定了理、法、方、药的理论基础。" +
          "公元3世纪初，张仲景博览群书，广采众方，凝聚毕生心血，写就《伤寒杂病论》一书。",
      },
    };
  },
  filters: {
    lengthFilter(str) {
      return str.substr(0,240)
    },
  },
  computed: {},

  watch: {},

  methods: {
    init(id) {
      this.getBook(id).then((res) => {
        let data = res.data.result;
        data.desc = data.description;
        data.img = "require('" + data.img + "')";
        data.content = data.preview;
        this.book = data;
      });
    },
    async getBook(id) {
      return await this.$http.get(`/book/detail/${id}`);
    },
    onSelect(option) {
      Toast.success("分享成功");
      this.showShare = false;
    },
    share() {
         this.showShare = !this.showShare;
    },
    collect(){
      
    }
  },
  mounted() {
    this.init(this.$route.params.id);
  },
  created() {
    this.$emit("tab", false);
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
.body {
  background-color: #fff;
}
.header {
  display: flex;
  padding: 15px;
}
.right {
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  .title {
    font-size: 18px;
    font-weight: 700;
  }
  .author {
    margin-top: 10px;
  }
  .tags {
    width: 160px;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
  }
  .desc {
    font-size: 14px;
    margin-top: 15px;
    line-height: 20px;
    height: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

.content {
  line-height: 40px;
  padding: 20px 20px 55px;
}

.readBottom{
  height: 55px;
  line-height: 55px;
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display:  flex;
  span{
    flex: 1;
    color: @secondaryTextColor;
    text-align: center;
  }
  .redRound{
  background-color: @accentColor;
  border-radius: 20px;
  color: #fff;
}
}
.textMiddle{
  text-align: center;
  width: 60vw;
    line-height: 40px;
    margin: 0 auto;
  padding: 20px 0 55px;
}

</style>